<script setup lang="ts">
import { reactive, ref } from 'vue';
import { Icon } from '@iconify/vue';
import { generateGetParams, useTableData, type InitTableOptions } from '@/components/core/dynamic-table/helper';
import { DefaultService, DefaultService as Api } from '@/servers';
import DynamicTable, { AInput, TableController } from '@/components/core/dynamic-table';
import { dictColumns } from './table-data';
import { ADialogInstance } from '@/components/basic/dialog';
import { message } from '@/components/basic/message';

type Item = {
  id: number;
  data: Record<string, string>;
  endata: Record<string, string>;
} & Record<string, string | number | boolean | null | object | string[]>;

const page = ref(1);
const size = ref(20);
const sort = ref(1);

const DictionaryOptions = reactive<InitTableOptions<typeof DefaultService>>({
  query: 'getSystemDictList',
  getParams: generateGetParams(page.value, size.value, sort.value),
  listUrl: 'data.list',
  sort: (a: Item, b: Item): number => a.id - b.id
});

const { tableData, loading, fetchData } = useTableData(DictionaryOptions);

const dialogRef = ref<ADialogInstance>();
const form = ref<Item | null>(null);
function getSerialized() {
  return Math.max(Object.values(form.value!.data || {}).length, Object.values(form.value!.endata || {}).length);
}

const defaultData = () => ({
  name: '',
  options: '',
  data: {},
  endata: {}
});

function openEdit(row: Item = defaultData) {
  form.value = { ...row };
  const seri_number = getSerialized();
  form.value!.data = { ...(form.value!.data || {}) };
  form.value!.endata = { ...(form.value!.endata || {}) };

  for (let i = 1; i <= seri_number; i++) {
    form.value!.data[i] = form.value!.data[i] || '';
    form.value!.endata[i] = form.value!.endata[i] || '';
  }

  dialogRef.value?.openModel();
}

function addDicData() {
  const index = (getSerialized() as number) + 1;
  form.value!.data[index] = '';
  form.value!.endata[index] = '';
}

function deleteDictionary(row: Item) {
  Api.postSystemDictDelete(row.id).then(res => message.success(res.msg));
}

async function submitEdit() {
  Api.postSystemDictEdit();
  console.log(form.value);
  // await fetchData();
}
</script>
<template>
  <div class="wh-full flex flex-col box-border pb-2">
    <TableController>
      <template #right>
        <a-button type="primary" @click="openEdit()">Add</a-button>
      </template>
    </TableController>
    <div class="overflow-y-auto w-full p-1 box-border" style="background-color: var(--el-bg-color)">
      <DynamicTable
        height="100%"
        :columns="dictColumns || []"
        :default-expand-all="false"
        row-key="id"
        :data="tableData"
        v-loading="loading"
        show-overflow-tooltip
        header-row-class-name="table-header"
      >
        <template #data="{ scope }">
          <!-- 完成 -->
          <Icon icon="ant-design:check-circle-outlined" class="color-green-500" v-if="scope.row.data" />
          <!-- 未完成 -->
          <Icon icon="ant-design:close-circle-outlined" v-else />
        </template>
        <template #endata="{ scope }">
          <!-- 完成 -->
          <Icon icon="ant-design:check-circle-outlined" class="color-green-500" v-if="scope.row.endata" />
          <!-- 未完成 -->
          <Icon icon="ant-design:close-circle-outlined" v-else />
        </template>
        <template #operate="container">
          <a-button type="info" size="small" @click="openEdit(container.scope.row)">
            <!-- 编辑 -->
            <Icon icon="ant-design:edit-outlined" />
          </a-button>
          <a-button type="danger" size="small" @click="deleteDictionary(container.scope.row)">
            <!-- 删除 -->
            <Icon icon="ant-design:delete-outlined" />
          </a-button>
        </template>
      </DynamicTable>

      <a-dialog ref="dialogRef" title="Edit Dictionary" width="600" @confirm="submitEdit" draggable>
        <div class="flex flex-row w-full min-h-200px">
          <div class="w-100px flex flex-col">
            <div class="h-35px mb-5px flex-cc"></div>
            <div class="h-35px mb-5px flex-cc" v-for="i in getSerialized()" :key="i">{{ i }}</div>
            <div class="h-35px mb-5px flex-cc">
              <a-button type="success" @click="addDicData">Add</a-button>
            </div>
          </div>
          <div class="flex-1/2 flex flex-col">
            <div class="h-35px mb-5px flex justify-start font-bold pl-11px items-center">Data</div>
            <div class="h-35px mb-5px flex justify-start" v-for="(_, k) in form!.data" :key="k">
              <AInput class="w-150px" v-model="form!.data[k]" />
            </div>
          </div>
          <div class="flex-1/2 flex flex-col">
            <div class="h-35px mb-5px flex justify-start font-bold pl-11px items-center">EnData</div>
            <div class="h-35px mb-5px flex justify-start" v-for="(_, k) in form!.endata" :key="k">
              <AInput class="w-150px" v-model="form!.endata[k]" />
            </div>
          </div>
        </div>
      </a-dialog>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
